<template>
  <section class="todoapp">
    <hm-header @newList="newList"></hm-header>
    <hm-body :list="list"
             @delList="delList"
             @changeList="changeList"
             @fullList="fullList"></hm-body>
    <hm-footer :list="list"
               @clearList="clearList"
               :type="type"
               @changeType="changeType"></hm-footer>
  </section>
</template>

<script>
import HmHeader from './components/HmHeader.vue'
import HmBody from './components/HmBody.vue'
import HmFooter from './components/HmFooter.vue'
export default {
  components: {
    HmHeader,
    HmBody,
    HmFooter,
  },
  data () {
    return {
      list: [
        { id: 1, name: 111, flag: false },
        { id: 2, name: 222, flag: true },
        { id: 3, name: 333, flag: false },
      ],
      type:'all'
    }
  },
  methods:{
    delList(id){
      this.list=this.list.filter(item=>item.id!==id)
    },
    newList(newName){
      this.list=[...this.list,{id:new Date(),name:newName,flag:false}]
       
    },
    changeList(e,flag){
      if(e)this.list.filter(item=>item.flag!==flag)
    },
    clearList(){
      this.list=this.list.filter(item=>!item.flag)
    },
    changeType(value){
      this.type=value
    },
    fullList(){
      this.list=this.list.filter(item=>item.flag=true)
    },
  },
 
}
</script>

<style scoped>
</style>
